<template>
<el-main>
    <div style="text-align: left">
        <span>考试计划管理</span>
        <br>
        <span>考试计划名称:</span>
        <el-input placeholder="考试计划名称" v-model="input1" style="width:200px;margin-right:20px"></el-input>

        <!--查询-->
        <el-button type="info" icon="el-icon-search" @click="select">查询</el-button>
        <!--添加按钮-->
        <el-button type="success" icon="el-icon-edit" @click="dialogVisible = true">新增</el-button>

        <!--添加模态框-->
        <el-dialog title="新增信息" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
            <span>新增信息</span>
            <br>
            <div class="addinput">
                <el-input placeholder="请输入考试计划名称" v-model="addexamPlanName" style="width: 300px"></el-input>
                <br>
                <el-select v-model="addadmissionTicketGrant" placeholder="请选择是否发放准考证">

                    <el-option v-for="item in options1" :key="item.admissionTicketGrant" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <br>
                <br>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="add(), (dialogVisible = false)">确 定</el-button>
            </span>
        </el-dialog>

        <!--修改模态框-->
        <el-dialog title="修改信息" :visible.sync="updialogVisible" width="40%" :before-close="handleClose">
            <span>修改信息</span>
            <br>
            <div class="addinput">
                <el-input placeholder="请输入考试计划名称" v-model="upexamPlanName" style="width: 300px"></el-input>
                <br>
                <el-select v-model="upadmissionTicketGrant" placeholder="请选择是否发放准考证">

                    <el-option v-for="item in options1" :key="item.admissionTicketGrant" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <br>
                <br>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="update(), (updialogVisible = false)">确 定</el-button>
            </span>
        </el-dialog>

        <!--详情模态框-->
        <el-dialog title="详情信息" :visible.sync="XQdialogVisible" width="70%" :before-close="handleClose">
            <b4>考试计划详情信息</b4>
            <br>
            考试科目名称 : {{examSubjectName}}
            <br>
            <br>
            <!--添加考试科目按钮-->
            <el-button type="info" @click="(xqadddialogVisible = true),(cxkemu())">添加考试科目</el-button>
            <!--考生列表按钮-->
            <el-button type="success" @click="1">考生列表</el-button>
            <br>
            <br>
            <br>
            <!--详情查 -->
          <el-table :data="tableData2">
          <el-table-column prop="examPlanName" label="考试名称" width="200">
          </el-table-column>
          <el-table-column prop="examSubjectName" label="考试科目名称" width="200">
          </el-table-column>
          <template slot-scope="">
            <el-table-column label="开始时间" width="300">
              <template slot-scope="scope">
                <span v-html="getYMDHMS(scope.row.examStartTime)"></span>
              </template>
            </el-table-column>
          </template>
          <template slot-scope="">
            <el-table-column label="结束时间" width="300">
              <template slot-scope="scope">
                <span v-html="getYMDHMS(scope.row.examEndTime)"></span>
              </template>
            </el-table-column>
          </template>
          <el-table-column label="添加考试学生">
            <el-button type="warning" @click="1">添加考试学生</el-button>

          </el-table-column>

        </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="XQdialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="update(), (XQdialogVisible = false)">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 新增模态框开始 -->
    <el-dialog title="新增考试计划" :visible.sync="xqadddialogVisible" width="40%" :before-close="handleClose">
        <el-form :model="xinzeng" label-width="30%">
              examPlanId:{{xinzeng.examPlanId}}
              <el-form-item label="考试科目名称">
                <el-select v-model="xinzeng.examSubjectId" placeholder="请选择科目">
                    <el-option v-for="item in depss" :key="item.examSubjectId" :label="item.examSubjectName" :value="item.examSubjectId"></el-option>
                </el-select>
            </el-form-item>
            <!-- 日期时间选择器 -->
                <div class="block">
                    <el-date-picker v-model="xinzeng.examStartTime" type="datetime" placeholder="选择开始时间">
                    </el-date-picker>
                </div>

                <!-- 日期时间选择器 -->
                <div class="block">
                    <el-date-picker v-model="xinzeng.examEndTime" type="datetime" placeholder="选择结束时间">
                    </el-date-picker>
                </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="xqadddialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="xqadd()">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 新增模态框结束 -->

    </div>

    <!-- 全查 -->
    <el-table :data="tableData">
        <el-table-column prop="examPlanId" label="序号" width="140">
        </el-table-column>
        <el-table-column prop="examPlanName" label="考试计划名称" width="140">
        </el-table-column>
        <el-table-column prop="admissionTicketGrant" label="是否发布准考证" width="120">
        </el-table-column>

        <el-table-column prop="address"> </el-table-column><!-- 空 -->

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="warning" @click="find(scope.row.pkId)">修改</el-button>
                <el-button type="danger" @click="del(scope.row.pkId)">删除</el-button>
                <el-button type="danger" @click="xqcx(scope.row.examPlanId)">详情</el-button>
            </template>

        </el-table-column>

        <el-table-column prop="" label="标题5" width="140">
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-row>
        <el-col style="text-align: right">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">

            </el-pagination>
        </el-col>
    </el-row>
</el-main>
</template>

<script>
export default {
    name: "ExamPlan",
    //页面自动加载，
    created: function () {
        this.select();
    },
    data() {
        return {
            //分页
            pageNum: 1, //默认当前页数
            pageSize: 5, //默认每页显示条数
            total: 0, //总数据条数

            input1: "",
            tableData: [],

            dialogVisible: false,
            addexamPlanName: "",
            addadmissionTicketGrant: "",
            options1: [{
                    value: "",
                    label: "空",
                },
                {
                    value: "是",
                    label: "是",
                },
                {
                    value: "否",
                    label: "否",
                },
            ],

            updialogVisible: false,
            uppkId: "",
            upexamPlanName: "",
            upadmissionTicketGrant: "",
            //详情新增查询
            tableData2: [],
            XQdialogVisible: false,
            //详情新增
            xqadddialogVisible: false,
            xinzeng: {
                examPlanId: '',
                examSubjectId: '',
                examStartTime: '',
                examEndTime: '',
            },
            depss: [], // 新增时科目下拉框
            
        };
    },
    props: {},
    methods: {
        // 获取当前页的数据信息
        //pageSize 默认每页显示条数改变时会触发
        handleSizeChange(val) {
            this.pageSize = val;
            this.select(this.pageNum, this.pageSize); //console.log(`每页 ${val} 条`);
        }, //currentPage 默认当前页数改变时会触发
        handleCurrentChange(val) {
            this.pageNum = val;
            this.select(this.pageNum, this.pageSize); //console.log(`当前页: ${val}`);
        },

        //模态框
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },
        select: function () {
            var that = this;
            this.$axios.post("/ExamPlan/quest", {
                    examPlanName: this.input1,

                    //分页
                    pageNum: that.pageNum,
                    pageSize: that.pageSize,
                })
                .then(function (response) {
                    that.tableData = response.data.data;
                    that.total = response.data.pageInfo.total;
                })
        },
        add: function () {
            var that = this;
            this.$axios.post("/ExamPlan/save", {
                    examPlanName: that.addexamPlanName,
                    admissionTicketGrant: that.addadmissionTicketGrant,
                })
                .then(function (response) {
                    that.select(),
                        that.$message({
                            //弹出框
                            message: "新增成功!",
                            type: "success",
                        });
                });
        },
        del: function (pkId) {
            var that = this;
            this.$axios.post("/ExamPlan/del", {
                    pkId: pkId
                })
                .then(function (response) {
                    that.select(),
                        that.$message({
                            //弹出框
                            message: "删除成功!",
                            type: "success",
                        });
                });
        },
        find: function (pkId) {
            this.updialogVisible = true;
            var that = this;
            this.$axios.post("/ExamPlan/find", {
                    pkId: pkId,
                })
                .then(function (response) {
                    if (response.data.code == "3333") {
                        that.upexamPlanName = response.data.data.examPlanName;
                        that.upadmissionTicketGrant = response.data.data.admissionTicketGrant;

                        that.uppkId = response.data.data.pkId;
                        that.select();
                    }
                });
        },
        update: function () {
            var that = this;
            this.$axios.post("/ExamPlan/update", {
                    pkId: that.uppkId,
                    examPlanName: that.upexamPlanName,
                    admissionTicketGrant: that.upadmissionTicketGrant,
                })
                .then(function (response) {
                    that.select()
                });
        },
        xqcx: function (examPlanId) {
            this.XQdialogVisible = true;
            var that = this;
            this.$axios.post("/ExamPlan/xqquest", {
                    examPlanId: examPlanId,
                    
                })
                .then(function (response) {

                    that.tableData2 = response.data.data;
                    that.xinzeng.examPlanId = response.data.data[0].examPlanId;
                    //  that.XQexamPlanName = response.data.data[0].examPlanName;
                    //  that.XQexamSubjectName = response.data.data[0].examSubjectName;
                    // console.log("examPlanName::"+response.data.data[0].examPlanName)
                    // console.log("examSubjectName::"+response.data.data[0].examSubjectName)
                })

        },
        xqadd: function(){
            var that = this;
            this.$axios.post("/ExamPlan/XQadd",{
                examPlanId: that.xinzeng.examPlanId,
                examSubjectId : that.xinzeng.examSubjectId,
                examStartTime : that.xinzeng.examStartTime,
                examEndTime : that.xinzeng.examEndTime,
            })
            .then(function (response) {
                that.xqadddialogVisible = false;
                that.xqcx();
                //alert("新增成功");
                
            })

            
        },
        cxkemu: function(){
            var that = this;
            this.$axios.post("/ExamPlan/XQaddxlk",{
            })
            .then(function (response) {
                var redata = response.data.data;
                that.depss = redata;
            })
        },

        getYMDHMS: function (timestamp) {
            let time = new Date(timestamp);
            let year = time.getFullYear();
            let month = time.getMonth() + 1;
            let date = time.getDate();
            let hours = time.getHours();
            let minute = time.getMinutes();
            let second = time.getSeconds();

            if (month < 10) {
                month = "0" + month;
            }
            if (date < 10) {
                date = "0" + date;
            }
            if (hours < 10) {
                hours = "0" + hours;
            }
            if (minute < 10) {
                minute = "0" + minute;
            }
            if (second < 10) {
                second = "0" + second;
            }
            return year + "-" + month + "-" + date + " " + hours + ":" + minute + ":" + second;
        },

    },
};
</script>

<style scoped></style>
